<!-- http://www.imooc.com/wiki/uniapp/databinding.html -->
<template>
	<view>
		<!-- 轮播图 -->
		<!-- <intervalBar styleStr="background-color: #0000ff!important"></intervalBar> -->
		<swiper
		    class='swiper_view'
			indicator-dots 
			circular 
			indicator-dots="true" 
			autoplay="true" 
			interval="5000" 
		>
			<swiper-item v-for="(item, index) in swipers" :key="index" >
				<image :src="item" @click="previewImages(swipers, index)" class="swiper_image"></image>
			</swiper-item>
		</swiper>
		
		<intervalBar></intervalBar>
		<intervalBar></intervalBar>
		
		<!-- 导航区域 -->
		<view class='nav'>
			<view class='nav_item' v-for="(item, index) in navs" :key='index' @click='navItemClick(item.path, item.title, item.pdf)'>
				<view :class='item.icon'></view>
				<text>{{item.title}}</text>
			</view>
		</view>
		
		<intervalBar></intervalBar>
		<intervalBar></intervalBar>
		
		<!-- 网上报名步骤 -->
		<view class='steps'>
			<!-- <view class='steps_title' id='target' @click="register_title1">网上报名步骤</view> -->
			
			<uni-section title="网上报名步骤" type="line" style="color: #007AFF">
				<view class='my_uni_steps' >
					<uni-steps :options="steps" :active="steps_current_index" direction="column" />
				</view>
			</uni-section>
			
			
			<!-- <view class='steps_item' v-for="(item, index) in steps" :key='index' @click="steps_current_index=index">
				<view class="icon">
					<icon :type='index==steps_current_index?"success_no_circle":index<steps_current_index?"clear":"cancel"' size="24"/>
				</view>
				<view class="text" :style='index==steps_current_index?"color: #B500FE":index<steps_current_index?"color: #acafaf":""'>
					<text>{{item.title}}</text>
				</view>
			
			</view> -->
		</view>
		
		<button class='next_item_button' @click="steps_current_index = (steps_current_index + 1) % 4">下一项</button>
		
		<!-- <web-view :src="url" :progress="false"></web-view> -->
		<!-- <web-view src="https://cn.bing.com/?mkt=zh-CN"></web-view> -->

	</view>
</template>

<script>
	import intervalBar from "../../components/bdpicker/intervalBar.vue"
	export default {
		//注册组件
		components: {
			intervalBar,
		},
	  data () {
		return {
		  active: 2,
		  list1: [{
		  	title: '事件一'
		  }, {
		  	title: '事件二'
		  }, {
		  	title: '事件三'
		  }, {
		  	title: '事件四'
		  }],
		  list2: [{
		  	title: '买家下单',
		  	desc: '2018-11-11'
		  }, {
		  	title: '卖家发货',
		  	desc: '2018-11-12'
		  }, {
		  	title: '买家签收',
		  	desc: '2018-11-13'
		  }, {
		  	title: '交易完成',
		  	desc: '2018-11-14'
		  }],
		  
		  
	      swipers: [],
		  index: 0,
		  iconType: ['success', 'info', 'warn'],
		  names: ['小慕课', '大慕课', '老慕课'],
		  checkboxItems: [{
				  name: 'USA',
				  value: '美国'
			  },
			  {
				  name: 'CHN',
				  value: '中国',
				  checked: 'true'
			  }
		  ],
		  
		  // 阿里云图标库: https://www.iconfont.cn/
		  // 使用教程: https://blog.csdn.net/xiaohui_brook/article/details/106193208?utm_medium=distribute.pc_relevant.none-task-blog-2~default~baidujs_title~default-1.highlightwordscore&spm=1001.2101.3001.4242.2
		  navs: [
		  	{
		  		icon: 'iconfont icon-baoming',
		  		title: '立刻报名',
		  		path: '/pages/submitInfo/submitInfo'
		  	},
			{
				icon: 'iconfont icon-guanyuwomen',
				title: '专业介绍',
				path: '/pages/cart/cart'
			},
		  	{
		  		icon: 'iconfont icon-xuexiziliao',
		  		title: '招生简章',
		  		path: '/pages/image/image'
		  	},
		  	{
		  		icon: 'iconfont icon-dongtai',
		  		title: '校园动态',
		  		path: '/pages/contact/contact'
		  	},
		  ],
		  steps: [
		  	{
		  		icon: 'success',
		  		title: '填写网上预报名信息',
		  	},
			{
				icon: 'info',
				title: '根据短信通知进行缴费',
			},
			{
				icon: 'info',
				title: '进行正式报名',
			},
			{
				icon: 'info',
				title: '报名完成',
			},
		  ],
		  steps_current_index: 0,
		}
	  },
	  beforeCreate() {
	  },
	  onReady(){
	    //   wx.showShareMenu({
	    //       withShareTicket: true,
			  // menus: ["shareAppMessage", "shareTimeline"],// 发送朋友，发送朋友圈

	    //   });
	      // 或者
	      uni.showShareMenu({
	        withShareTicket: true,
			menus: ["shareAppMessage", "shareTimeline"],// 发送朋友，发送朋友圈
	      });
	  },
	  onLoad(){
		  this.init();
		  this.getNavs();
		  this.getSwipers();
		  
		  // 注意：想要拿到元素实例，需要在实例已经挂载到页面上才可以
		  // const query = uni.createSelectorQuery().in(this);
		  // query.select('#target').boundingClientRect(data => {
		  // 	console.log(data)
		  // }).exec();
		  
		  // console.log('========== +++++++++++++ ===========')
		  // query.select('#target').click();
		  
		  // uni.navigateTo({
		  // 	url: '../submitInfo/submitInfo'
		  // });
		  
		  // // 测试[切换页面]  身份证正反面拍照
		  // uni.navigateTo({
		  // 	url: '../contact/contact?name=test&age=18'
		  // });
		  
		  // // 测试[手写电子签名]
		  // uni.navigateTo({
		  // 	url: '../sign/sign'
		  // })
		  
	  },
	  onShow(){
		  this.listenForUpdates();
		  // console.log('============ onshow ========');
		  // var ceshiUrl = uni.getStorageSync('ceshiUrl');
		  // console.log('===== ceshiUrl: ', ceshiUrl);
	  },
	  onPullDownRefresh() {
		console.log('下拉刷新了111')
		
		this.page = 1
		this.goods = []
		this.flag = false
		setTimeout(()=>this.init(), 500)
	  },
	  methods: {
		    //监听小程序是否有新版本需要更新
			listenForUpdates(){
			  const updateManager = uni.getUpdateManager();
			  updateManager.onCheckForUpdate(function (res) {
				// 请求完新版本信息的回调
				console.log(res.hasUpdate,'新版本回调');
				if(res.hasUpdate == true){
				  updateManager.onUpdateReady(function (res) {
					uni.showModal({
					  title: '更新提示',
					  content: '新版本已经准备好，是否重启应用？',
					  success(res) {
						console.log(res,'新版本下载完')
						if (res.confirm) {
						  // 新的版本已经下载好，调用 applyUpdate 应用新版本并重启
						  updateManager.applyUpdate();
						}
					  }
					});
				  });
				  updateManager.onUpdateFailed(function (res) {
					// 新的版本下载失败
					uni.showModal({
					  title:'更新失败',
					  content: '很抱歉未能更新成功。您可以尝试重新进入，或者在微信界面下拉，在最近使用中找到此小程序，长按将其拖拽到底部删除按钮中，然后重新搜索小程序进入。给您带来的不便，深表歉意！',
					  showCancel:false,
					});
	  
				  });
				}
			  });
			},
		  
		  register_title1() {
			  // // 测试
			  // uni.navigateTo({
			  // 	url: '../contact/contact'
			  // })
		  },
		  
		  mouseenter() {
			console.log('mouseenter');  
		  },
		  
		  async getNavs() {
				// 发送请求
				  var myUrl = '/api/myconf/MobileNavigation/';
				  var myData =  {
					'is_active': 1,
				  };
				  const res = await this.$myGetFunction({
				  	url: myUrl,
				  	data: myData,
				  })
				  var dc_ls = res.data.result.data;
				  
				  // --- 更改dc中的old_key为new_key, name->title, url->path
				  var old_key = 'name';
				  var new_key = 'title';
				  dc_ls = this.api.conv_old_key_to_new_key_in_dc_ls(dc_ls, old_key, new_key)
				  
				  var old_key = 'url';
				  var new_key = 'path';
				  dc_ls = this.api.conv_old_key_to_new_key_in_dc_ls(dc_ls, old_key, new_key)
				  
				  this.navs = dc_ls;
				  // console.log('加载navigations成功!');
		  },
		  
		  async init(){
			const res = await this.api.myRequest({
				method: 'POST',
				url: '/api/myconf/Info/',
				data: {
					'post_type': 'list',
					'order_type_ls': '-id',
				}
			});
			if(res.statusCode !== 200){
				uni.stopPullDownRefresh();
				return uni.showToast({
					title: '获取数据失败!',
					icon: 'none'
				})
			}
			var data = res.data.result.data[0]
			
			uni.setNavigationBarTitle({
				title: data.school_name
			});
			// console.log("wx data.wechat ------", data.wechat);
			
			console.log('is_not_checking === ', this.cache.get('is_not_checking'));
			if (data.wechat != '_'){
				this.cache.set('is_not_checking', true, 60*60*24);
				// var is_not_checking = this.cache.get('is_not_checking');
				// console.log('is_not_checking --- ', is_not_checking);
			}
			else {
				this.cache.set('is_not_checking', false, 60*5);
			}
			
		  	uni.stopPullDownRefresh()
		  },
		  
		  hideToast(){
			  uni.hideToast()
		  },
		  
		  checkboxChange: function(e) {
			  console.log(e)
			  var checked = e.target.value
			  var changed = {}
			  for (var i = 0; i < this.checkboxItems.length; i++) {
				  if (checked.indexOf(this.checkboxItems[i].name) !== -1) {
					  changed['checkboxItems[' + i + '].checked'] = true
				  } else {
					  changed['checkboxItems[' + i + '].checked'] = false
				  }
			  }
		  },
		
		  // 导航点击的处理函数
		  navItemClick (path, title, pdf) {
			if (pdf && typeof(pdf) != 'object')
			{
				var path = encodeURIComponent(pdf);
				var url = '/pages/mywebview/mywebview' + '?path='+path + '&title=' +　title;
				uni.navigateTo({
					url
				})
				return;
			}
			
			console.log('! ~~~~~~~ ', path, title, pdf);
			if (path.substr(0, 4) != 'http') {
				uni.navigateTo({
					url:　path
				});
				return;
			}
			
			// #ifdef H5
			window.location.href = path;
			return;
			// #endif
			
			var path = encodeURIComponent(path);
			var url = '/pages/mywebview/mywebview' + '?path='+ path + '&title=' +　title;
			uni.navigateTo({
				url
			})
		  },
		  previewImages(urls, index) {
			  this.api.previewImages(urls, index);
		  },
		  getMajors() {
		  	uni.request({
		  		method: 'GET',
		  	    url: this.$baseUrl + '/api/myconf/Major/',
		  		success: (res) => {
		  			var data = res.data.result.data;
		  			console.log('======= data', data)
		  			this.selected_major.names = []
		  			this.major_list = []
		  			for(var i = 0; i < data.length; i++){
		  				var d = data[i]['name'];
		  				this.selected_major.names.push(d);
		  			}
					
		  		}
				
		  	});
			console.log('======= data', '---')
		},
		  // 获取轮播图的数据
		  async getSwipers() {
			const res = await this.api.myRequest({
				method: 'POST',
				url: '/api/myconf/Swiper/',
				data: {
					'post_type': 'list',
					'order_type_ls': 'ordering',
				}
			})
			
			// 轮播图字典
			var data = res.data.result.data
		  	var key_name = 'url'
		  	var values = this.get_keyname_value(data, key_name)
		  	
		  	this.swipers = values
		  },
	  }
	}
</script>

<style lang="scss">
	.swiper_view {
		border-top-width: 4rpx;
		border-top-style: solid;
		border-top-color: #EEEEEE;
		
		.swiper_image{
			border-top-left-radius:0.5em;
			border-top-right-radius:0.5em;
			border-bottom-right-radius:0.5em;
			border-bottom-left-radius:0.5em;
			height: 350rpx;
		}
		
		height: 400rpx;
		padding-top: 10upx;
		
	}
	
	.next_item_button{
		margin-top: 30upx;
		width: 400rpx;
		// height: 100rpx;
		background-color: #3729ff;
		color: #fff;
	}
	
	.steps {
		background: #fff;
		overflow: hidden;
		// margin-top: 10rpx;
		// margin-top: 10px;
		.steps_title {
			height: 30px;
			line-height: 30px;
			color: #000;
			font-size: 32upx;
			font-weight: bold;
			text-align: center;
			letter-spacing: 20px;
			// color: #1ff6bd;
			// font-size: 32upx;
			// padding-left: 30upx;
			
			// background: #eee;
			// background-color: #ddffff;
			
			background: $interval-color;
			background-color: $interval-color;
			
			margin: 10rpx 0;
			
			
		}
		.my_uni_steps {
			// padding-left: 60upx;
			margin-left: 50rpx;
		}
		.steps_item {
		  display: grid;
		  grid-template-columns: 0.4fr 1.6fr;
		  grid-template-rows: 1fr;
		  gap: 0px 0px;
		  grid-auto-flow: row;
		  grid-template-areas:
		    "icon text";
		  // margin-left: 30upx;
		  // padding-left: 30upx;
		}
		
		.icon {
			
			margin-left: 30upx;
			padding-left: 30upx;
			grid-area: icon;
			float: left;
		}
		.text {
			// margin-bottom: 30upx;
			padding-top: 1upx;
			// padding-bottom: 30upx;
			grid-area: text;
			float: left;
			// border-style:solid;
			  border-bottom: 1upx solid  #1ff6bd;
		 }
		
	}
	
	swiper{
		width: 750rpx;
		height: 380rpx;
		image{
			height: 85%;
			width: 80%;
			margin-left: 10%;
		}
	}
	
	.container_1 {
	  display: grid;
	  grid-template-columns: 1fr 1fr;
	  grid-template-rows: 1fr 1fr;
	  gap: 0px 0px;
	  grid-auto-flow: row;
	  grid-template-areas:
	    "tab_view tab_view"
	    ". .";
	}
	
	.tab_view {
	  display: grid;
	  grid-template-columns: 1fr 1fr;
	  grid-template-rows: 1fr;
	  gap: 0px 0px;
	  grid-auto-flow: row;
	  grid-template-areas:
	    "left right";
	  grid-area: tab_view;
	}
	
	.left { 
		grid-area: left; 
		margin: auto;
	}
	
	.right {
		grid-area: right; 
		margin: auto;
	}

	// 导航
	.nav {
		display: flex;
		margin-bottom: 15rpx;
		.nav_item {
			width: 25%;
			text-align: center;
			view{
				width: 120rpx;
				height: 120rpx;
				background-color: $background-color;
				border-radius: 60rpx;
				margin: 10px auto;
				line-height: 120rpx;
				color: #FFFFFF;
				font-size: 50rpx;
			}
			.icon-dongtai{
				font-size: 75rpx;
			}
			text{
				font-size: 30rpx;
			}
		}
	}
</style>